import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button, Form, Input } from 'antd'
import { KeyOutlined, UserOutlined } from '@ant-design/icons'
import imgLogo from '@/common/images/logo.png'
import imgCover from './cover.svg'
import { setAuthToken } from '@/router'  // 新增导入
import './login.styl'

export default function Login() {
  const [loading, setLoading] = useState(false)
  const navigate = useNavigate()

  const onFinish = async () => {
    setLoading(true)
    try {
      setAuthToken('dummy-token')
      navigate('/')
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="P-login">
      <div className="login-con">
        {/* 新增 .cover-con 容器包裹左侧元素 */}
        <div className="cover-con">
          <img src={imgLogo} alt="logo" className="img-logo" />
          <h2>PT Tracker 用户登录</h2>
          <img src={imgCover} alt="" className="img-cover" />
        </div>

        {/* 右侧表单容器 */}
        <div className="pannel-con">
          <h3>Welcome!</h3>
          <p className="subtext">请登录您的账号</p>

          <Form onFinish={onFinish}>
            <Form.Item name="username" rules={[{ required: true }]}>
              <Input prefix={<UserOutlined />} placeholder="用户名" />
            </Form.Item>
            
            <Form.Item name="password" rules={[{ required: true }]}>
              <Input.Password prefix={<KeyOutlined />} placeholder="密码" />
            </Form.Item>
            
            <Button 
              type="primary" 
              htmlType="submit" 
              loading={loading}
              block
            >
              登录
            </Button>
            
            <div className="action-links">
              <Button type="link" onClick={() => navigate('/register')}>
                立即注册
              </Button>
            </div>
          </Form>
        </div>
      </div>
    </div>
  )
}